<template>
	<div class="flex justify-between items-center">
		<betting-combo :data="sportIds" />
		<betting-odds-plus :displayOdds="comboOdds" :comboBonusOdds="comboBonusOdds" />
	</div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { BettingCombo, BettingOddsPlus } from '@/components/betting'
import { useBetslipStore, useMatchStore } from '@/store'
defineProps({
	comboOdds: {
		type: Number,
		required: true
	},
	comboBonusOdds: {
		type: Number,
		required: true
	}
})

const betslipStore = useBetslipStore()
const matchStore = useMatchStore()

const sportIds = computed(() =>
	betslipStore.comboList.map((item) => matchStore.getMatch(item.eventId)?.sportId)
)
</script>
